<template>
  <div class="lists-item"
    ><div class="item-text text-overflow-1"
      ><span class="dot">{{ index }}</span
      >{{ item[contentKey] && extractTextFromHTML(item[contentKey])?.substring(0, 60) }}</div
    ><div class="item-time">{{ formatDate(item.createTime, 'YYYY-MM-DD') }}</div></div
  >
</template>
<script lang="ts" setup>
import { extractTextFromHTML } from '@/utils/formatter'
import { formatDate } from '@/utils/formatTime'
const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  },
  index: {
    type: Number,
    default: 0
  },
  iconUrlKey: {
    type: String,
    default: `iconUrl`
  },
  titleKey: {
    type: String,
    default: 'noticeTitle'
  },
  contentKey: {
    type: String,
    default: 'noticeContent'
  },
  categoryFn: {
    type: Function,
    default: () => {}
  },
  useOperationSlot: {
    type: Boolean,
    default: false
  },
  // 是否启用预览图片
  enablePreview: {
    type: Boolean,
    default: false
  },
  // 是否是列布局 大图
  isColumn: {
    type: Boolean,
    default: false
  },
  hideTime: {
    type: Boolean,
    default: false
  }
})
// const emit = defineEmits(['click'])
// const getCategory = () => {
//   return props.categoryFn(props.item)
// }
// const handleClick = () => {
//   emit('click', props.item)
// }
</script>
<style lang="scss" scoped>
.lists-item {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  cursor: pointer;

  .dot {
    display: inline-flex;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    font-size: 16px;
    color: #fff;
    background: var(--el-color-primary);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
  }

  .item-text {
    font-size: 16px;
    line-height: 23.17px;
    letter-spacing: 0;
    color: #444;
  }

  .item-time {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 23.17px;
    letter-spacing: 0;
    color: #999;
  }

  &:hover {
    .item-text {
      color: var(--el-color-primary) !important;
    }
  }
}
</style>
